<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>徐理念Blog - 标签</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" th:href="@{/css/home.css}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="/script/jquery-3.6.0.min.js"></script>
    <style>
        .tag-item {
            display: inline-block;
            margin: 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: 1rem;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            transition: all 0.3s ease;
        }

        .tag-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .tag-name {
            font-weight: 500;
            margin-right: 0.5rem;
        }

        .tag-count {
            background-color: #0d6efd;
            color: white;
            border-radius: 50%;
            padding: 0.1rem 0.4rem;
            font-size: 0.8rem;
        }

        .tag-description {
            font-size: 0.9rem;
            color: #6c757d;
            margin-top: 0.25rem;
        }

        .search-box {
            max-width: 300px;
        }

        .action-buttons {
            margin-top: 0.5rem;
        }

        .action-button {
            margin-right: 0.5rem;
            font-size: 0.8rem;
        }
    </style>
</head>
<body>
<!-- 头部区域 -->
<header class="blog-header">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <!-- 左侧标题 -->
            <div class="blog-title">
                <h3 class="mb-0">徐理念Blog</h3>
            </div>

            <!-- 中间导航链接 -->
            <nav class="d-none d-md-block">
                <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a class="nav-link" href="/blogHome"><i class="bi bi-house-door"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/articleList"><i class="bi bi-card-text"></i> 全部动态</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/categories"><i class="bi bi-folder"></i> 分类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/tagList"><i class="bi bi-tags"></i> 标签</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/articleManage"><i class="bi bi-pencil-square"></i> 文章管理</a>
                    </li>
                </ul>
            </nav>

            <!-- 右侧用户信息 -->
            <div class="user-info">
                <div class="dropdown">
                    <a class="d-flex align-items-center text-decoration-none dropdown-toggle"
                       href="#" role="button" data-bs-toggle="dropdown">
                        <div class="user-avatar" th:text="用户">U</div>
                        <span class="d-none d-md-inline" th:text="徐理念">用户名</span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="/profile"><i class="bi bi-person"></i> 个人资料</a></li>
                        <li><a class="dropdown-item" href="/settings"><i class="bi bi-gear"></i> 设置</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="/logout"><i class="bi bi-box-arrow-right"></i> 退出登录</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 主要内容区域 -->
<main class="main-content">
    <div class="container">
        <!-- 移动端导航菜单 -->
        <div class="d-md-none mb-4">
            <div class="card">
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="/" class="btn btn-outline-primary"><i class="bi bi-house-door"></i> 首页</a>
                        <a href="/articleList" class="btn btn-outline-primary"><i class="bi bi-card-text"></i> 全部动态</a>
                        <a href="/categories" class="btn btn-outline-primary"><i class="bi bi-folder"></i> 分类</a>
                        <a href="/tags" class="btn btn-outline-primary active"><i class="bi bi-tags"></i> 标签</a>
                        <a href="/articleManage" class="btn btn-outline-primary"><i class="bi bi-pencil-square"></i>
                            文章管理</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h4 class="mb-0">标签云</h4>
                        <div class="d-flex">
                            <div class="search-box me-2">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="搜索标签..." id="searchInput">
                                    <button class="btn btn-outline-secondary" type="button" id="searchBtn">
                                        <i class="bi bi-search"></i>
                                    </button>
                                </div>
                            </div>
                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#tagModal"
                                    onclick="openAddModal()">
                                <i class="bi bi-plus-lg"></i> 新增标签
                            </button>
                        </div>
                    </div>

                    <div class="card-body">
                        <!-- 标签列表 -->
                        <div class="tags-list">
                            <div th:if="${tagPage != null and not #lists.isEmpty(tagPage.records)}">
                                <div class="d-flex flex-wrap">
                                    <div th:each="tag : ${tagPage.records}" class="tag-item" th:data-tag-id="${tag.id}">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="tag-name" th:text="${tag.name}">标签名称</span>
                                            <span class="tag-count" th:text="${tag.articleCount ?: 0}">0</span>
                                        </div>
                                        <div class="tag-description"
                                             th:if="${tag.description != null and tag.description != ''}"
                                             th:text="${#strings.abbreviate(tag.description, 30)}">
                                            标签描述
                                        </div>
                                        <div class="tag-meta mt-1">
                                            <small class="text-muted">
                                                <i class="bi bi-calendar"></i>
                                                <span th:text="${#temporals.format(tag.createTime, 'yyyy-MM-dd')}">创建时间</span>
                                            </small>
                                        </div>
                                        <div class="action-buttons">
                                            <button class="btn btn-sm btn-outline-primary action-button edit-btn"
                                                    th:data-id="${tag.id}"
                                                    th:data-name="${tag.name}"
                                                    th:data-description="${tag.description ?: ''}">
                                                <i class="bi bi-pencil"></i> 编辑
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger action-button delete-btn"
                                                    th:data-id="${tag.id}"
                                                    th:data-name="${tag.name}">
                                                <i class="bi bi-trash"></i> 删除
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <!-- 分页组件 -->
                                <div class="pagination-container mt-4">
                                    <nav aria-label="标签分页" th:if="${tagPage.pages > 1}">
                                        <ul class="pagination justify-content-center">
                                            <!-- 上一页 -->
                                            <li class="page-item" th:classappend="${tagPage.current == 1} ? 'disabled'">
                                                <a class="page-link"
                                                   th:href="@{/tagList(pageNum=${tagPage.current - 1})}"
                                                   aria-label="Previous">
                                                    <span aria-hidden="true">&laquo;</span>
                                                </a>
                                            </li>

                                            <!-- 页码 -->
                                            <li class="page-item"
                                                th:each="i : ${#numbers.sequence(1, tagPage.pages)}"
                                                th:classappend="${i == tagPage.current} ? 'active'">
                                                <a class="page-link" th:href="@{/tagList(pageNum=${i})}" th:text="${i}">1</a>
                                            </li>

                                            <!-- 下一页 -->
                                            <li class="page-item"
                                                th:classappend="${tagPage.current == tagPage.pages} ? 'disabled'">
                                                <a class="page-link"
                                                   th:href="@{/tagList(pageNum=${tagPage.current + 1})}"
                                                   aria-label="Next">
                                                    <span aria-hidden="true">&raquo;</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>

                            <!-- 无标签时显示 -->
                            <div th:if="${tagPage == null or #lists.isEmpty(tagPage.records)}" class="text-center py-5">
                                <i class="bi bi-tags" style="font-size: 3rem; color: #ccc;"></i>
                                <h5 class="mt-3">暂无标签</h5>
                                <p class="text-muted">还没有创建任何标签</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 标签模态框 -->
<div class="modal fade" id="tagModal" tabindex="-1" aria-labelledby="tagModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="tagModalLabel">标签管理</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="tagForm">
                    <input type="hidden" id="tagId">
                    <div class="mb-3">
                        <label for="tagName" class="form-label">标签名称</label>
                        <input type="text" class="form-control" id="tagName" required>
                    </div>
                    <div class="mb-3">
                        <label for="tagDescription" class="form-label">标签描述</label>
                        <textarea class="form-control" id="tagDescription" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveTagBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 底部区域 -->
<footer class="blog-footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4 mb-4 mb-md-0">
                <h5>联系我</h5>
                <ul class="list-unstyled">
                    <li class="mb-2">
                        <i class="fab fa-qq me-2"></i>
                        <strong>QQ:</strong> <span>123456789</span>
                    </li>
                    <li class="mb-2">
                        <i class="bi bi-envelope me-2"></i>
                        <strong>Email:</strong> <span>example@example.com</span>
                    </li>
                    <li>
                        <i class="bi bi-chat-dots me-2"></i>
                        <strong>微信:</strong> <span>xuln_blog</span>
                    </li>
                </ul>
            </div>
            <div class="col-md-4 mb-4 mb-md-0">
                <h5>关于博客</h5>
                <p>这是一个个人技术博客，分享编程经验、技术心得和生活感悟。</p>
            </div>
            <div class="col-md-4">
                <h5>友情链接</h5>
                <ul class="list-unstyled">
                    <li><a href="#" class="text-decoration-none">GitHub</a></li>
                    <li><a href="#" class="text-decoration-none">SegmentFault</a></li>
                    <li><a href="#" class="text-decoration-none">掘金</a></li>
                </ul>
            </div>
        </div>
        <hr>
        <div class="text-center">
            <p class="mb-0">&copy; 2022 徐理念Blog. All rights reserved.</p>
        </div>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 页面加载完成后绑定事件
    document.addEventListener('DOMContentLoaded', function () {
        // 绑定编辑按钮事件
        document.querySelectorAll('.edit-btn').forEach(button => {
            button.addEventListener('click', function () {
                const id = this.getAttribute('data-id');
                const name = this.getAttribute('data-name');
                const description = this.getAttribute('data-description');
                openEditModal(id, name, description);
            });
        });

        // 绑定删除按钮事件
        document.querySelectorAll('.delete-btn').forEach(button => {
            button.addEventListener('click', function () {
                const id = this.getAttribute('data-id');
                const name = this.getAttribute('data-name');
                deleteTag(id, name);
            });
        });
    });

    // 打开新增标签模态框
    function openAddModal() {
        document.getElementById('tagModalLabel').textContent = '新增标签';
        document.getElementById('tagId').value = '';
        document.getElementById('tagName').value = '';
        document.getElementById('tagDescription').value = '';
    }

    // 打开编辑标签模态框
    function openEditModal(id, name, description) {
        document.getElementById('tagModalLabel').textContent = '编辑标签';
        document.getElementById('tagId').value = id;
        document.getElementById('tagName').value = name;
        document.getElementById('tagDescription').value = description;
        // 显示模态框
        var modal = new bootstrap.Modal(document.getElementById('tagModal'));
        modal.show();
    }

    // 删除标签
    function deleteTag(id, name) {
        if (confirm('确定要删除标签 "' + name + '" 吗？')) {
            // 发送删除请求
            fetch('/tag/delete/' + id, {
                method: 'POST'
            })
                .then(response => {
                    if (response.ok) {
                        alert('标签删除成功');
                        location.reload();
                    } else {
                        alert('删除失败');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('删除过程中发生错误');
                });
        }
    }

    // 保存标签
    document.getElementById('saveTagBtn').addEventListener('click', function () {
        const id = document.getElementById('tagId').value;
        const name = document.getElementById('tagName').value.trim();
        const description = document.getElementById('tagDescription').value.trim();

        if (!name) {
            alert('请输入标签名称');
            return;
        }

        const formData = new FormData();
        formData.append('name', name);
        formData.append('description', description);

        let url = '/tag/save';
        let method = 'POST';

        if (id) {
            // 编辑模式
            url = '/tag/update/' + id;
            method = 'POST'
        }

        fetch(url, {
            method: method,
            body: formData
        })
            .then(response => {
                console.log('Response1111:', response);
                // response.ok 表示响应状态码为2xx
                //    response.status 响应状态码
                if (response.status === 200) {
                    alert(id ? '标签更新成功' : '标签添加成功');
                    location.reload();
                } else {
                    console.log('Response Text:', response.text)
                    return response.json();
                    alert('操作失败111'+response.text)
                    response.text().then(text => {
                        console.log('Response Text:', text);
                        alert('操作失败: ' + text);
                    });
                }
            }).then(data => {

                // 这里才是接收的后端返回的数据,  data是前面.then函数return的数据
                if (data.code === 200) {
                    alert(id ? '标签更新成功' : '标签添加成功');
                    console.log('Response Data:', data);
                    location.reload();
                } else {
                    alert('操作失败: ' + (data.message || '未知错误'));
                }
        }).catch(error => {
                console.error('Error:', error);
                alert('操作过程中发生错误');
            });
    });

    // 搜索功能
    document.getElementById('searchBtn').addEventListener('click', function () {
        const keyword = document.getElementById('searchInput').value.trim();
        if (keyword) {
            window.location.href = '/tagList?keyword=' + encodeURIComponent(keyword);
        } else {
            window.location.href = '/tagList';
        }
    });

    // 回车搜索
    document.getElementById('searchInput').addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
            document.getElementById('searchBtn').click();
        }
    });
</script>
</body>
</html>
